<template>
  <div class="wrapper">
    <use-header title="成员管理"/>
    <a-card>
      <a-flex justify="space-between" class="margin-bottom">
        <a-space>
          <a-button type="primary" @click="modalOpen = true"><plus-outlined/>添加成员</a-button>
          <a-dropdown>
            <a-button>更多操作<down-outlined class="ant-icon-down"/></a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="on">批量启用</a-menu-item>
                <a-menu-item key="off">批量锁定</a-menu-item>
                <a-menu-item key="remove">批量移除</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-space>
        <a-space>
          <a-input-search name="keywords" placeholder="搜索成员名称"/>
          <a-tooltip title="刷新">
            <a-button class="icon-only" @click="store.getList(true)"><reload-outlined/></a-button>
          </a-tooltip>
        </a-space>
      </a-flex>
      <a-table :columns="columns"
               :data-source="store.dataSource"
               :loading="store.loading"
               row-key="id"
               :pagination="tablePagination"
               :row-selection="{selectedRowKeys,onChange: selectChange}">
        <template #bodyCell="{column,record}">
          <template v-if="column.key === 'username'">
            <a-flex align="center" :gap="8">
              <a-avatar size="small" :src="record.avatar"/>
              <span>{{record.username}}</span>
            </a-flex>
          </template>
          <template v-if="column.key === 'role'">
            <a-tag :color="record.role_color">{{record.role_name}}</a-tag>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.status" color="green">正常</a-tag>
            <a-tag v-else color="red">锁定</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <div class="table-action" v-if="record.role_slug !== 'owner'">
              <span @click="edit(record)"><edit-outlined/>编辑</span>
              <span class="danger" @click="handleDelete(record.id)"><delete-outlined/>移除</span>
            </div>
            <div v-else class="text-color-gray"><ExclamationCircleFilled /> 无法修改拥有者</div>
          </template>
        </template>
      </a-table>
    </a-card>
    <member-invite-modal v-model:open="modalOpen"/>
    <member-modal v-model:open="editOpen" v-model:data-item="dataItem"/>
  </div>
</template>

<script setup lang="ts">
import UseHeader from "@/components/UseHeader.vue";
import {
  PlusOutlined,
  DownOutlined,
  DeleteOutlined,
    EditOutlined,
    ReloadOutlined,
    ExclamationCircleFilled
} from "@ant-design/icons-vue";
import {tablePagination} from "@/config";
import {onMounted, ref} from "vue";
import {useMemberStore} from "@/store/modules/organization/member.ts";
import MemberInviteModal from "./components/MemberInviteModal.vue";
import MemberModal from "@/views/admin/permission/components/MemberModal.vue";
import {Modal} from "ant-design-vue";
import {hasPermission} from "@/utils/permission.ts";
const selectedRowKeys = ref<number[]>([])
const modalOpen = ref<boolean>(false)
const editOpen = ref<boolean>(false)
const store = useMemberStore()
const dataItem = ref<MemberListType>()
const columns = [
  {title: '成员名称', dataIndex: 'username', key: 'username',width: 120},
  {title: '角色', dataIndex: 'role', key: 'role',width: 120},
  {title:'手机号', dataIndex: 'mobile', key: 'mobile',width: 150},
  {title: '邮箱', dataIndex: 'email', key: 'email'},
  {title: '加入时间', dataIndex: 'join_time', key: 'join_time',width: 150},
  {title: '状态', dataIndex: 'status', key: 'status',width: 100},
  {title: '操作', key: 'action', width: 240}
]
const selectChange = (keys:any[]) => {
  selectedRowKeys.value = keys
}
const edit = (record:MemberListType) => {
  editOpen.value = true
  dataItem.value = record
}
const handleDelete = (id:number) => {
  if(!hasPermission('member:delete')) return false;
  Modal.confirm({
    title: '删除成员',
    content: '确定要删除该成员吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      await store.remove(id)
    }
  })
}
onMounted(()=>store.getList())
</script>

<style scoped>

</style>